<!-- 
  style样式绑定：
    该样式绑定与 class样式绑定的区别是，class样式绑定是有或无，style是必须有
    但是style样式绑定可以调整样式

    实际绑定的形式都要是对象，要么是在标签中为对象，要么是在样式中为对象
-->
<script setup>
  import {ref} from "vue"
  const styleObj = ref({
    "color": "red",
    "font-size": "45px", 
  })
  const color = ref("red")
</script>

<template>
  <div>
    <!-- 对象的形式进行样式绑定 -->
    <p :style="styleObj">我的世界</p>
    <p :style="{color: color}">路遥</p>
  </div>
</template>

<style scoped>

</style>